<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>

</head>

<body>
    <div>
        <input type="text" value="邮箱/ID/手机号">

    </div>
    <script>
        // 输入框获得焦点，提示内容消失，边框变色
        //  输入框失去焦点，如果内容为空，提示内容恢复，边框变色；如果内容不为空，只有边框变色


        // 获取事件
        var text = document.querySelector('input');

        // 事件类型  事件处理程序
        // 失去焦点 onblur
        text.onblur = function () {
            if (this.value === '') {
                this.value = '邮箱/ID/手机号'
            }

        }
        text.onfocus = function () {
            if (this.value === '邮箱/ID/手机号') {
                this.value = ''
            }

        }

    </script>
</body>

</html>